<template>
  <div class="page-container update-password">
    <van-nav-bar
      title="修改密码"
      left-arrow
      @click-left="router.back()"
    />
    
    <div class="content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <!-- 原密码 -->
          <van-field
            v-model="formData.oldPassword"
            type="password"
            name="oldPassword"
            label="原密码"
            placeholder="请输入原密码"
            :rules="[{ required: true, message: '请输入原密码' }]"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}"
          >
            <template #left-icon>
              <van-icon name="lock" />
            </template>
          </van-field>
          
          <!-- 新密码 -->
          <!-- <van-field
            v-model="formData.newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            :rules="[
              { required: true, message: '请输入新密码' },
              { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, 
                message: '密码必须包含大小写字母和数字，且不少于8位' }
            ]"
          >
            <template #left-icon>
              <van-icon name="lock" />
            </template>
          </van-field> -->
          <van-field
            v-model="formData.newPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="请输入新密码"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}"
            :rules="[{ required: true, message: '请输入新密码' },
            {
              pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/, // 正则表达式校验密码格式
              message: '密码必须包含字母和数字，且长度为8-16位',
            },]"
          >
            <template #left-icon>
              <van-icon name="lock" />
            </template>
          </van-field>

          <!-- 确认新密码 -->
          <van-field
            v-model="formData.confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="请再次输入新密码"
            :rules="[
              { required: true, message: '请再次输入新密码' },
              { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
            ]"
            :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}"
          >
            <template #left-icon>
              <van-icon name="lock" />
            </template>
          </van-field>
        </van-cell-group>

        <!-- 提交按钮 -->
        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit" :style="{fontSize:userStore.userInfo.ageGroup === 1 ? '20px' : ''}">
            确认修改
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { updatedPassword } from '@/api/user'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 表单数据
const formData = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 验证确认密码
const validateConfirmPassword = (value) => {
  return value === formData.value.newPassword
}

// 提交表单
const onSubmit = async () => {
  if (formData.value.oldPassword === formData.value.newPassword) {
    showToast('新密码不能与原密码相同')
    return
  }

  try {
    const loading = showLoadingToast({
      message: '修改中...',
      forbidClick: true,
    })

    const res = await updatedPassword({
      oldPassword: formData.value.oldPassword,
      newPassword: formData.value.newPassword,
      confirmPassword: formData.value.newPassword
    })

    loading.close()

    if (res.code === 200) {
      showToast({
        message: '密码修改成功，请重新登录',
        type: 'success'
      })
      
      // 清除用户状态，跳转到登录页
      userStore.clearUserState()
      router.replace('/login')
    }
  } catch (error) {
    showToast({
      message: error.message || '修改失败',
      type: 'fail'
    })
  }
}
</script>

<style lang="scss" scoped>
.update-password {
  min-height: 100vh;
  background: #f7f8fa;

  .content {
    padding: 20px;

    .van-cell-group {
      margin-bottom: 20px;

      :deep(.van-field__left-icon) {
        margin-right: 8px;
        color: #666;
      }
    }

    .submit-btn {
      margin-top: 24px;
      padding: 0 16px;
    }
  }
}
</style>
